<template>
    <div style="position: relative;">
        <div id="btn_pos">
            <!-- ROV图像：<input type="text" v-model="remote_addr"> -->
            <button @click="connetc_open_video()">打开ROV视频</button>
            &nbsp;&nbsp;<button @click="close_video()">关闭视频</button>
        </div>
        <canvas id="video-canvas" width="640" height="480"></canvas>
    </div>

</template>

<script setup>
    import { ref, onMounted,onUnmounted,inject } from 'vue'
    import JSMpeg from '/src/assets/jsmpeg.js'

    const remote_addr = inject('serve_addr')
    let video = null
    //onMounted(connetc_open_video)
    onUnmounted(()=>{
        if(video){
            video.stop()
            video.destroy()
            video = null
        }
    })

    function connetc_open_video() {
        const canvas = document.getElementById('video-canvas');
        const url = 'ws://' + remote_addr.value + ':9999/pull/test'
        var player = new JSMpeg.Player(url, {
            canvas: canvas,
            audio: false,
            pauseWhenHidden: false,
            videoBufferSize: 8 * 1024 * 1024,
        });
        video = player
        window.rov_vv = player
        //console.log(player)
    }
    function close_video(){
        if(video){
            const w = video.renderer.canvas.width
            const h = video.renderer.canvas.height
            video.stop()
            video.renderer.canvas.width  = w
            video.renderer.canvas.height = h
            video.destroy()

            video = null
        }

    }
</script>

<style scoped>
    input {
        width: 24em;
        font-size: 1.1em;
    }
    canvas{
        border: 1px dashed #989898;
    }
    #btn_pos{
        position: absolute;
        top: 0px;
        left: calc(100% + 0.6em);
        z-index: 2;
        width: 16em;
    }
</style>
